import { Outlet, useLocation, useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { TabBar } from 'antd-mobile';
import {
  AppOutline,
  FolderOutline,
  UserOutline,
} from "antd-mobile-icons";
import styles from './LandingPage.module.less';
import { createAction } from '@common/utils';
import { SET_PAGE_STACK } from "@store/global-state/action-types";

const LandingPage = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const location = useLocation();
  const { pathname } = location;

  const tabs = [
    {
      key: "/app/landing-page/home",
      title: "首页",
      icon: <AppOutline />,
    },
    {
      key: "/app/landing-page/data-sync",
      title: "数据",
      icon: <FolderOutline />,
    },
    {
      key: "/app/landing-page/mine",
      title: "我的",
      icon: <UserOutline />,
    },
  ];

  const setRouteActive = (value) => {
    navigate(value);
    dispatch(createAction(SET_PAGE_STACK, [value]));
  };

  return (
    <>
      <div className={styles.body}>
        <Outlet />
      </div>
      <div className={styles.bottom}>
        <TabBar
          activeKey={pathname}
          onChange={(value) => setRouteActive(value)}
        >
          {tabs.map((item) => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </div>
    </>
  );
};

export default LandingPage;
